<template>
	<view class="loader" :class="{ hidden: !show }">
		<view class="loader-inner">
			<view class="loader-line-wrap" v-for="i in 5" :key="i">
				<view class="loader-line"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Loader',
	props: {
		show: {
			type: Boolean,
			default: false
		}
	}
}
</script>

<style scoped lang="scss">
.loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	
	.loader-inner {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		
		.loader-line-wrap {
			.loader-line {
				width: 4px;
				height: 20px;
				background: #fff;
				margin: 2px;
				animation: loader 1s ease-in-out infinite;
				
				&:nth-child(1) { animation-delay: 0s; }
				&:nth-child(2) { animation-delay: 0.1s; }
				&:nth-child(3) { animation-delay: 0.2s; }
				&:nth-child(4) { animation-delay: 0.3s; }
				&:nth-child(5) { animation-delay: 0.4s; }
			}
		}
	}
}

@keyframes loader {
	0%, 40% { transform: scaleY(0.4); }
	20% { transform: scaleY(1); }
}
</style> 